<template>
  <div class="admin-auto-video">
    <x-border ref="xBorder" :title="viewModel.border.title" icon="flaticon-settings" v-if="async">
      <div class="auto-video_ul" :style="`height: ${documentHeight}px;`">
        <div class="auto-video_search">
          <el-input v-model="searchValue" class="search-input" placeholder="标题" size="small"></el-input>
          <div class="search-but" @click="butSearch">
            <i class="el-icon-search"></i>
            搜索
          </div>
        </div>
        <div class="auto-video_box">
          <div class="auto-video_bli" v-for="(item,index) in viewModel.result.result" :key="index">
            <div class="auto-video_trpo" @click="tabChang(item.url)">
              <img :src="$ala.urlImage(item.image)" />
              <div class="auto-video_text">{{item.name}}</div>
            </div>
          </div>
        </div>
        <div class="auto-video_pagin">
          <el-pagination @current-change="currentChange" :page-size="viewModel.result.pageSize" :pager-count="11" layout="prev, pager, next" :total="viewModel.result.recordCount"></el-pagination>
        </div>
      </div>
    </x-border>
  </div>
</template>


<script>
  import ala from 'ala'
  import data from './data'
  export default {
    props: {
      widget: {},
      title: {}
    },
    data () {
      return {
        reload: true, // 是否刷新
        table: null,
        viewModel: null,
        async: false,
        searchValue: '',
        documentHeight: 0
      }
    },
    methods: {
      async init () {
        var h = document.documentElement.clientHeight || document.body.clientHeight
        this.documentHeight = h - 150
        if (!this.widget.value || !this.widget.value) {
          this.$ala.toMessage('类型传入不正确,请重新传入', 'danger')
        }
        this.viewModel = await data.search(this.widget.value)
        this.async = true
      },
      tabChang (url) {
        this.$router.push(url)
      },
      async viewInit (valueArray = {}) {
        this.viewModel = await data.search(this.widget.value, valueArray)
      },
      async butSearch () {
        var para = {
          name: this.searchValue
        }
        this.viewInit(para)
      },
      currentChange (val) {
        var para = {
          pageIndex: val
        }
        this.viewInit(para)
      },
      // 表格加载完成事件
      afterTableLoad (dataResult) {
        if (dataResult.singleReport !== null) {
          var value = { value: dataResult.singleReport }
          this.viewModel = value
        } else {
          this.viewModel = null
        }
        this.$nextTick(() => {
          dataResult.border.type = this.widget.value.themeColor
          var border = this.$ala.getBorder(dataResult.border, this.widgetValue.table.border)
          this.$refs.xBorder.init(border)
        })
      },
      toExcel () {
        this.$refs.xTable.toExcel()
      },
      // 监听 x-widget值得变化,不能直接监听路由，直接监听路由可能会导致数据延迟
      watchWidget (val) {
        this.init()
        if (this.reload === false) {
          this.$nextTick(() => {
            this.$refs.xTable.init(this.table.type, this.table.columns)
          })
        }
        this.reload = false // 解决刷新浏览器，数据加载两次的问题
      }
    }
  }
</script>
<style rel="stylesheet/scss" lang="scss">
  @import "./index.scss";
</style>

